<script setup>
import { onMounted,ref,reactive } from 'vue';
import axios from 'axios'

const data = reactive({
    playlist:[]
})

var songId = ref('1471876020')

console.log(songId);

// 导入生命周期 
onMounted(()=>{
   // 请求各单详情
    axios({
        url:"https://apis.netstart.cn/music/playlist/detail?id=102212152",
        method:"GET"
    }).then(res=>{
        console.log('请求',res);
        data.playlist = res.data.playlist.tracks
        console.log(data.playlist);
    })
})

// function changeSong(){
//     console.log(12);
// }

const changeSong = (id)=>{
    console.log('click',id);
    songId.value = id
    
}

</script>

<template>
    <div class="demo">
        <h1>世界第一高城--{{ songId }}</h1>
        <audio :src="`https://music.163.com/song/media/outer/url?id=${songId}.mp3`" controls></audio>
        <div class="play-list">
            <div class="list-item" v-for="item in data.playlist" 
            :key="item.id"
            @click="changeSong(item.id)"
            >
                <div class="poster">
                    <img :src="item.al.picUrl" alt="">
                </div>
                <div class="name">{{ item.name }}</div>
            </div>
        </div>
    </div>

</template>
<style scoped>
img{
    width: 100%;
}

.play-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list-item{
    width: 45%;
}

.poster{
    width: 100%;
}
</style>